<template>
  <!-- 发布寻人 -->
  <view id="container" v-if="JSON.stringify(human_info) != '[]'" style="padding-bottom: 65rpx">
    <view class="banner">
      <image src="https://z3.ax1x.com/2021/09/02/hD6GsU.png" class="img"></image>
    </view>

    <!-- 地图 -->
    <view class="map" style="position: relative; width: auto; height: auto">
      <map :style="`width: ${map_width}vw; height: ${map_height}vh;`" :latitude="covers[0].latitude" :longitude="covers[0].longitude" :markers="covers" scale="15" :polyline="my_polyline">
        <!--  -->
      </map>
      <view
        class=""
        style="
          position: absolute;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
          background-color: #000000;
          color: #ffffff;
          bottom: 0;
          right: 1vw;
          padding: 0rpx 10rpx 0rpx 10rpx;
          border-radius: 5rpx;
          font-size: 24rpx;
          z-index: 20;
        "
        @click="see_global_map"
      >
        {{ map_btn_txt }}
      </view>
    </view>
    <!-- 地图 -->
    <view class="content" v-if="human_info.status === 1 || human_info.status === 2">
      <view class="title">{{ human_info.title }}</view>
      <view class="use-time">
        <view class="find-state">
          {{ getStatus }}
        </view>
        <view class="find-time">
          {{ human_info.insert_time }}
        </view>
      </view>
      <view class="info">
        <view v-for="(item, index) in human_info.face_img" @click="preview_img(index, human_info.face_img)" class="info_image_box">
          <image :src="item" class="photo" mode="aspectFill" v-if="item.indexOf('https') !== -1"></image>
          <image :src="vuex_api_HEADER + item" class="photo" mode="aspectFill" v-else></image>
        </view>
      </view>
			<view class="laiyuan" v-if="human_info.make_type === 2">{{human_info.laiyuan}}</view>
    </view>
		<!-- 已找回样式 -->
		<view class="content" v-if="human_info.status === 3">
			<view class="title">{{ human_info.title }}</view>
			<view class="use-time">
			  <view class="find-state" style="background-color: #46DDA2 ;">
			    {{ getStatus }}
			  </view>
			  <view class="find-time" style="background-color: #B0B0B0;">
			    {{ human_info.insert_time }}
			  </view>
			</view>
			<view class="statusThree" style="display: flex;justify-content: start;">
			  <!-- 	<view v-for="(item, index) in human_info.face_img" @click="preview_img(index, human_info.face_img)" class="info_image_box">
			  	  <image :src="item" class="photo" mode="aspectFill" v-if="item.indexOf('https') !== -1"></image>
			  	  <image :src="vuex_api_HEADER + item" class="photo" mode="aspectFill" v-else></image>
			  	</view> 	 -->
				<view @click="preview_img(0, human_info.face_img)" class="info_image_box">
					<image :src="human_info.face_img[0]" class="photo" mode="aspectFill" v-if="human_info.face_img[0].indexOf('https') !== -1"></image>
					<image :src="vuex_api_HEADER + human_info.face_img[0]" class="photo" mode="aspectFill" v-else></image>
				</view>
				<view class="content-detail" style="padding-left: 40rpx;" >
				  <view>姓名：{{ human_info.name }}</view>
				  <view>性别：{{ human_info.sex == 1 ? '男' : '女' }}</view>
				  <view>年龄：{{ human_info.age ?  human_info.age + '岁' : '未知'}}</view>
				  <view>身高：{{ human_info.height ?  human_info.height + 'cm' : '暂无'}}</view>
				</view>
			</view>
		</view>
		
    <!-- 侧边栏 -->
    <view  class="side-bar">
      <view style="display: flex; flex-direction: column; align-items: center">
        <image src="../../static/search-detail/ll.png" style="width: 46rpx; height: 46rpx"></image>
        <view>{{ human_info.over_n }}</view>
      </view>
      <!-- <view style="display: flex;flex-direction: column;align-items: center;">
				<image src="../../static/search-detail/zl.png" style="width: 46rpx;height: 46rpx;"></image>
				<view>{{human_info.atten_n}}</view>
			</view> -->
      <view style="display: flex; flex-direction: column; align-items: center">
        <image src="../../static/search-detail/fx.png" style="width: 46rpx; height: 46rpx" @click="share_to_friends"></image>
        <view>{{ human_info.share_n }}</view>
      </view>
    </view>

    <view class="content-detail" style="padding: 27rpx 28rpx 25rpx 28rpx; margin-top: 10rpx" v-if="human_info.status === 1 || human_info.status === 2">
      <view>姓名：{{ human_info.name }}</view>
      <view>性别：{{ human_info.sex == 1 ? '男' : '女' }}</view>
      <view>年龄：{{ human_info.age ?  human_info.age + '岁' : '未知'}}</view>
      <view>身高：{{ human_info.height ?  human_info.height + 'cm' : '暂无'}}</view>
      <view class="waimao">
        <view class="tips">外貌特征：</view>
        <view>{{ human_info.lost_trait }}</view>
      </view>
    </view>

    <view class="content-detail" style="margin-top: 11rpx; padding: 25rpx 28rpx 29rpx 28rpx" v-if="human_info.status === 1 || human_info.status === 2">
      <view>
        <view style="margin-bottom: 15rpx; font-weight: bold">走失描述</view>
        <view>
          {{ human_info.describe }}
        </view>
      </view>
    </view>

    <view class="content-detail" style="margin-top: 13rpx">
      <view class="detail-item">
        <image src="../../static/search-detail/lx.png" class="icon"></image>
        <view class="type"
          >发布类型：<text class="txt">{{ human_info.lost_type == 0 ? '找亲人' : '帮忙找' }}</text>
        </view>
      </view>

      <view class="detail-item">
        <image src="../../static/search-detail/sj.png" class="icon"></image>
        <view class="type" v-if="human_info.status === 2"
          >走失时间：<text class="txt">{{ human_info.lost_time }}</text>
        </view>
				<view class="type" v-if="human_info.status === 3"
				  >找回时间：<text class="txt">{{ human_info.find_time }}</text>
				</view>
				<view class="type" v-if="human_info.status === 0 || human_info.status === 1"
				  >发现时间：<text class="txt">{{ human_info.lost_time }}</text>
				</view>
      </view>

      <view class="detail-item" style="align-items: flex-start">
        <image src="../../static/search-detail/dd.png" class="icon"></image>
        <view style="font-weight: 700">{{ human_info.lost_type == 0 ? '走失地点：' : '发现地点：' }}</view>
        <view class="type distance">
          <view class="txt">{{ human_info.address_detail }}</view>
          <view class="dingwei" v-if="human_info.status == 2">
            <!-- <view style="margin-right: 12rpx;">??区</view> -->
            <image src="../../static/index/jl.png" class="icon"></image>
            <view>{{ human_info.distance }}km</view>
          </view>
        </view>
      </view>

      <view class="detail-item" v-if="human_info.status == 3">
        <image src="../../static/search-detail/sj.png" class="icon"></image>
        <view class="type"
          >找回地点：<text class="txt">{{ human_info.find_address_detail }}km</text>
        </view>
      </view>
      <view class="detail-item" v-if="human_info.status == 3 && human_info.lost_type == 0">
        <image src="../../static/search-detail/sj.png" class="icon"></image>
        <view class="type"
          >寻回半径：<text class="txt">{{ human_info.distance }}km</text>
        </view>
      </view>

      <view class="detail-item" v-if="human_info.status == 3">
        <image src="../../static/search-detail/sj.png" class="icon"></image>
        <view class="type"
          >分享：<text class="txt">{{ human_info.share_n }}</text>
        </view>
      </view>

      <view class="detail-item" v-if="human_info.status == 3">
        <image src="../../static/search-detail/sj.png" class="icon"></image>
        <view class="type"
          >浏览：<text class="txt">{{ human_info.over_n }}</text>
        </view>
      </view>
    </view>

    <view class="btn" @click="make_phonecall" v-if="human_info.status == 2 && !isPublisher">
      <image src="../../static/search-detail/tel.png" class="icon"></image>
      <view>点击联系发布人</view>
    </view>
		
		<view v-if="human_info.status == 2 && isPublisher" class="edit-bottom" @click="handleToEdit">编辑寻人信息</view>

    <view class="it-box">
      <!-- 发布者留言 -->
      <view class="owner-box">
        <view class="title">
          <image src="../../static/search-detail/ly.png" class="icon"></image>
          <view>发布人</view>
        </view>

        <view class="promulgator-content">
          <view class="promulgator-content-info">
            <image :src="publisher_list.info.member_headr" class="img" v-if="publisher_list.info && publisher_list.info.member_headr"></image>
            <view class="promulgator-content-txt" v-if="publisher_list.leave && publisher_list.leave.length > 0">
              <view v-if="publisher_list.info && publisher_list.info.member_name">{{ publisher_list.info.member_name }}</view>
              <view  v-for="(item, index) in publisher_list.leave" style="margin-top: 10rpx" >
                <view class="time">{{ item.insert_time }}</view>
                <view style="font-size: 25rpx; word-break: break-all; height: auto">
                  {{ item.content }}
                </view>
              </view>
            </view>
						<view v-else>
							<view style="height: 64rpx;line-height: 64rpx;margin-top: 10rpx;" v-if="publisher_list.info && publisher_list.info.member_name">{{ publisher_list.info.member_name }}</view>
						</view>
          </view>
        </view>

        <!-- 全部评论 -->
        <view class="user-comment">
          <view class="title">
            <image src="../../static/search-detail/pl.png" class="icon"></image>
            <view>全部评论 {{ total_cnt }}</view>
          </view>
          <!-- 评论盒子 -->
          <view class="promulgator-content" v-for="(item, index) in comment_list">
            <view class="promulgator-content-info">
              <!-- 头像 -->
              <image :src="item.head" class="img" mode="aspectFill" @click="show_card_detail(item.member_id, item.head)"></image>
              <view class="promulgator-content-txt">
                <!-- 昵称 发布时间 距离-->
                <view class="right-up-box" style="">
                  <view class="nick-box" style="">
                    <view style="font-size: 30rpx">{{ item.nickname }}</view>
                    <view class="auth" v-if="item.firm">
                      {{ item.firm }}
                    </view>
                  </view>
                  <view class="time-box" style="">
                    <text style="">{{ item.insert_time }}</text>
                    <view class="dis-box" style="">
                      <image class="icon" src="../../static/index/jl.png" style=""> </image>
                      <view class="distance" style=""> {{ item.distance }}km </view>
                    </view>
                  </view>
                </view>

                <!-- 一级评论 content -->
                <view class="level1" style="" @click="click_talkto_other(1, item.id, '', true, item.nickname, item)">
                  <view class="clue" v-if="item.clew == 1">
                    <image src="../../static/search-detail/xs.png" class="icon"></image>
                    <view>线索</view>
                  </view>
                  <view style="font-size: 25rpx">{{ item.content }}</view>
                </view>

                <!-- 二级评论 -->
                <view class="level2" v-if="'comment' in item && item.comment.length != 0">
                  <view v-for="(item2, index) in item.comment" style="padding-left: 10rpx; border-bottom: 2px solid #dbdbdb; margin-bottom: 5rpx; width: 100%">
                    <view v-if="item2.by_nickname != ''" @click="click_talkto_other(2, item.id, item2.id, true, item2.nickname, item2)">
                      <text style="color: #015bb4">{{ item2.nickname }} </text>
                      <text>@ </text>
                      <text style="color: #015bb4">{{ item2.by_nickname }}: </text>
                      <text>{{ item2.content }}</text>
                    </view>
                    <view v-else @click="click_talkto_other(2, item.id, item2.id, true, item2.nickname, item2)">
                      <text>{{ item2.nickname }}:</text>
                      <text>{{ item2.content }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <!-- 对直接回复点赞、举报 -->
            <view class="like">
              <view style="font-size: 17rpx">{{ item.like >= 1 ? item.like : '' }}</view>
              <image :src="item.is_like ? liked : notlike" class="icon" @click="like_to_comment(item.id, 1, item.like)"></image>
              <image src="../../static/check/gdan.png" class="icon" @click="complain_comment(item.id, 0)"> </image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部头像 输入框 转发 分享 -->
    <view class="bottom-box" style="" v-if="human_info.status == 2">
      <view class="always-show">
        <image class="head" :src="vuex_user_info.headimgurl" style=""></image>

        <input class="input-box" type="text" v-model="user_comment" :focus="set_focus" :placeholder="ph_val" @confirm="keyboard_confirm" confirm-type="send" @blur="focu_blur" @focus="get_focus" />

        <u-button style="color: #ffffff; width: 100rpx; height: 60rpx; background-color: #f2a739; position: absolute; right: 80rpx" @click="share_or_send">发布</u-button>
        <image src="../../static/detail-img/share.png" class="share_img" @click="handleClickShare"></image>
      </view>
    </view>

    <u-toast ref="uToast" />
    <!-- t弹出志愿者卡片 -->
    <u-popup class="card-box" v-model="show_card" mode="center" width="680rpx" height="400rpx" border-radius="20">
      <view class="community">
        <image class="img" src="https://z3.ax1x.com/2021/09/02/hD62od.jpg" mode=""></image>
        <view class="info">
          <image class="icon" :src="card_info.head" mode=""></image>
          <view class="ziliao">
            <view class="title">
              <text class="name">{{ card_info.name }}</text>
              <image class="gender-pic" style="" :src="card_info.gender == 1 ? boy : girl" mode=""></image>
              <text class="renzheng" @click="to_auth_page">{{ card_info.has_authed == 0 ? '未认证' : '已认证' }}</text>
            </view>
            <view class="msg">
              <text style="margin-right: 80rpx">影响力：{{ card_info.affect }}</text>
              <text>加入时长：{{ card_info.time }}天</text>
            </view>
            <view class="content">{{ card_info.signature }}</view>
          </view>
        </view>
      </view>
    </u-popup>

    <u-action-sheet :list="complain_list" v-model="complain_show" @click="complain_click"></u-action-sheet>
    <u-action-sheet :list="phone_list" v-model="show_phone_number" @click="phone_list_click" style="z-index: 999"> </u-action-sheet>
    <u-modal v-model="model_show" :show-cancel-button="model_show_cancel" :content="model_content" @confirm="model_confirm"></u-modal>
    <u-top-tips ref="toptips" :navbar-height="0"></u-top-tips>
		<toIndex></toIndex>
  </view>
</template>

<script>
	import toIndex from '../../components/to-index/to-index.vue';
	
// import wechat from '@/node_modules/jweixin-module'
var wx = require('jweixin-module')

export default {
	components: {
		toIndex
	},
  data() {
    return {
      threshold_val: [60000, 3600000],
      show_thread: false, //是否显示线索
      show_card: false, //显示卡片
      model_show: false,
      model_content: '关注人人寻,获取最新动态',
      model_show_cancel: false,
      complain_id: '', //记录举报id
      complain_type: '', //记录举报类型 0评论 1回复
      max_page: 0,
      total_cnt: 0,
      pageX: 0,
      page_size: 20,
      show_phone_number: false,
      phone_list: [],
      phone_number: [],
      flag: {
        // 记录评论标记 0话题 1评论 2回复
        type: 0,
        id: '',
        sub_id: '',
        to_other: false
      },
      complain_list: [],
      complain_show: false,
      set_focus: false,
      show_sendBtn: false,
      user_comment: '', // 当前用户输入的评论
      human_info: [], //走失人的信息
      human_status: '', //走失人计算属性状态
      topic_id: '', //走失人的编号
      comment_list: [], //记录所有人的评论数据
      detail_info: [],
      publisher_list: [],
      id: 0, // 使用 marker点击事件 需要填写id
      title: 'map',
      covers: [
        {
          latitude: 10.5,
          longitude: 84.41,
          iconPath: '',
          width: 50,
          height: 50,
          callout: {
            content: '走失点',
            fontSize: 20,
            padding: 5,
            textAlign: 'center',
            color: '#fffeee',
            bgColor: '#000000',
            display: 'ALWAYS',
            borderRadius: 5
          }
        }
      ],
      points: [],
      my_polyline: [
        {
          points: [],
          color: '#DC144D',
          borderColor: '#31c27c4D',
          width: 2,
          // arrowLine: true,
          dottedLine: true,
          borderWidth: 2 //线的边框宽度，还有很多参数，请看文档
        }
      ],
      circle2: [
        {
          latitude: 30.501591,
          longitude: 114.41394,
          color: '#00ffce',
          fillColor: '#FFFFFF1A',
          strokeWidth: 2,
          radius: 100
        }
      ],
      ticket: {},
      share_data: '',
      status: '',
      map_width: 100,
      map_height: 30,
      map_btn_txt: '查看地图',
      map_open_flag: 0,
      liked: '../../static/search-detail/zan2.png',
      notlike: '../../static/search-detail/zan.png',
      card_info: {
        name: '',
        affect: 999,
        signature: '',
        has_authed: 0,
        gender: 1
      },
      boy: '../../static/mine/nan.png',
      girl: '../../static/mine/nv.png',
      txt_list: [
        {
          checked: false,
          txt: '作为线索发送2'
        }
      ],
      hold_keyboard: true,
      ph_val: '评论',
			isPublisher: false
    }
  },
  computed: {
    getStatus() {
      switch (this.human_info.status) {
        case 0:
          return '审核中'
          break
        case 1:
          return '审核被拒'
          break
        case 2:
          return '正在找'
          break
        case 3:
          return '已找回'
          break
        default:
          return '暂无状态'
      }
    }
  },
  mounted() {
    let points = [
      {
        latitude: 29.58,
        longitude: 113.42
      },
      {
        latitude: 29.59,
        longitude: 115.41
      }
    ]
    this.my_polyline = [
      {
        points: this.points,
        color: '#DC144D',
        borderColor: '#31c27c',
        width: 2,
        // arrowLine: true,
        dottedLine: true,
        borderWidth: 2 //线的边框宽度，还有很多参数，请看文档
      }
    ]
  },

  async onLoad(op) {
		console.log('vuex_user_info', this.vuex_user_info)
    // let url = window.location.href
    // await this.$u.utils.login_check(url)
    if (op.from_uid) {
      this.$u.vuex('vuex_from_uid', `?from_uid=${op.from_uid}`)
    }

    this.topic_id = op.id
    this.flag.id = op.id
    let self = this
    let res = await this.$u.api.get_over_state_detail_info({
      id: this.topic_id
    })
    if (res.code == 200) {
      self.human_info = res.data;
			self.isPublisher = self.human_info.member_id === self.vuex_user_info.uid ? true : false;
      self.covers[0].latitude = parseFloat(self.human_info.lost_lat)
      self.covers[0].longitude = parseFloat(self.human_info.lost_lon)
      //正在找的人才能打电话
      if (self.human_info.status == 2) {
        let phoneID = res.data.phone
        for (var i = 0; i < phoneID.length; i++) {
          self.phone_list.unshift({
            text: self.human_info.make_type === 1 ? `电话${i + 1}` : phoneID[i],
            id: phoneID[i]
          })
        }
      }
      //人已找到的相关处理
      if (self.human_info.status == 3) {
        // 只返回了一张照片，转换为数组
        self.human_info.face_img = [self.human_info.face_img]
        // 提取走失点和找回点
        self.points.push({
          latitude: self.covers[0].latitude,
          longitude: self.covers[0].longitude
        })
        self.points.push({
          latitude: parseFloat(self.human_info.find_lat),
          longitude: parseFloat(self.human_info.find_lon)
        })

        // 将找回点加入到marker中
        self.covers.push({
          latitude: parseFloat(self.human_info.find_lat),
          longitude: parseFloat(self.human_info.find_lon),
          // iconPath: 'https://z3.ax1x.com/2021/09/02/hD6pad.gif',
          iconPath: '',
          width: 50,
          height: 50,
          callout: {
            content: '找回点',
            fontSize: 20,
            padding: 5,
            textAlign: 'center',
            color: '#fffeee',
            bgColor: '#000000',
            display: 'ALWAYS',
            borderRadius: 5
          }
        })
      }
    }
    await this.get_top_comment(this.topic_id)
    await this.get_comment_list()
    await this.get_complain_items()
    await this.config_wx_share()
    setTimeout(() => {
      // this.model_show=true
      // this.$u.utils.refresh_cur_page()
    }, 3000)
  },
  onReachBottom() {
    this.get_comment_list()
  },

  methods: {
    // 点击头像 查看卡片详情
    show_card_detail(id, head) {
      let self = this
      this.$u.api
        .get_user_card_info({
          id: id
        })
        .then((res) => {
          if (res.code == 200) {
            self.card_info.signature = res.data.bardian
            self.card_info.name = res.data.name
            self.card_info.gender = res.data.sex
            self.card_info.has_authed = res.data.sgs
            self.card_info.head = head
            self.card_info.affect = res.data.i_film
            self.card_info.time = res.data.days
            this.show_card = true
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    // 解析url参数
    getUrlParam(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) {
        return unescape(r[2])
      }
      return null
    },
    // 模态框确定
    model_confirm() {
      window.location.href = 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg4MjYzODU2Mw==&scene=110#wechat_redirect'
    },
    // 获取置顶留言
    get_top_comment(id) {
      let self = this
      this.$u.api
        .get_top_comment({
          id: id
        })
        .then((res) => {
          if (res.code == 200) {
            self.publisher_list = res.data
          }
        })
    },
    // 分享信息给好友
    share_to_friends() {
      this.$refs.toptips.show({
        title: '点击上方... 分享到朋友圈',
        type: 'primary',
        duration: '2300'
      })
    },
    share_or_send() {
			if(this.user_comment) {
				this.keyboard_confirm()
			} else {
				uni.showToast({
				  title: '请输入评论内容',
				  icon: 'none'
				})
			}
      
    },
    handleClickShare() {
      this.$refs.toptips.show({
        title: '点击上方... 分享到朋友圈',
        type: 'primary',
        duration: '2300'
      })
    },
    // 拨打电话
    make_phonecall() {
      this.show_phone_number = true
    },
    // 输入框获取焦点
    get_focus() {
      this.show_thread = true
    },
    phone_list_click(index) {
      this.$u.api
        .get_virtual_phone_number({
          id: this.phone_list[index].id
        })
        .then((res) => {
          uni.makePhoneCall({
            phoneNumber: res.data.mobile,
            success: (res) => {
              this.$refs.uToast.show({
                title: ' 拨打成功 ',
                type: 'success'
              })
            },
            // 失败回调
            fail: (res) => {
              // this.call_phone();
              this.$refs.uToast.show({
                title: ' 拨打失败 ',
                type: 'success'
              })
            }
          })
        })
    },
    // 获取分享ticket
    config_wx_share() {
      let self = this
      ;(async () => {
        // 1获取分享信息
        let share_data = await this.$u.api.get_share_info({
          flag: 'person',
          id: self.topic_id
        })
        if (share_data.code == 200) {
          let share_detail = share_data.data
          // 2开始获取票据
          let url = location.href.split('#')[0]
          let arr = url.split('&from_uid=')
          console.log('arr=======', arr)
          let res_ticket = await self.$u.api.get_share_ticket({
            // current_url: self.vuex_index_page
            current_url: arr[0]
          })
          if (res_ticket.code == 200) {
            // 3开始配置微信分享
            let ticket = res_ticket.data
            let cfg_data = {
              debug: false,
              appId: ticket.appId,
              timestamp: ticket.timestamp,
              nonceStr: ticket.nonceStr,
              signature: ticket.signature,
              jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
            }
            wx.config(cfg_data)
            wx.ready(function () {
              // 注册
              // let ret = ticket.url.indexOf('?')
              let deal_url = ''
              // if (ret == -1) { //没有?号
              // 	deal_url = ticket.url + encodeURIComponent('?from_uid=') + self.vuex_user_info.uid
              // } else {
              // 	deal_url = ticket.url + encodeURIComponent('&from_uid=') + self.vuex_user_info.uid
              // }
              deal_url =
                self.vuex_index_page +
                '#/pages/detail/detail?id=' +
                encodeURIComponent(self.topic_id) +
                '&status=' +
                encodeURIComponent(self.human_info.status) +
                '&from_uid=' +
                encodeURIComponent(self.vuex_user_info.uid)
              // 分享好友
              // let arg={
              // 	link: deal_url,
              // 	imgUrl: self.vuex_api_HEADER + encodeURIComponent(share_detail.share_img)
              // }
              wx.updateAppMessageShareData({
                title: share_detail.share_title,
                desc: share_detail.share_contents,
                link: deal_url,
                imgUrl: self.vuex_api_HEADER + share_detail.share_img,
                success: function (res) {
                  // wx.showOptionMenu();A
                }
              })
              // // 分享朋友圈
              wx.updateTimelineShareData({
                title: share_detail.share_title, // 分享标题
                link: deal_url,
                imgUrl: self.vuex_api_HEADER + share_detail.share_img, // 分享图标
                success: function (res) {}
              })
            })
          }
        }
      })()
    },
    // 获取当前页面分享信息
    get_share_info() {
      let self = this
      this.$u.api
        .get_share_info({
          flag: 'person',
          id: this.topic_id
        })
        .then((res) => {
          self.share_data = res.data
        })
    },
    // 获取举报列表
    async get_complain_items() {
      let res = await this.$u.api.get_complain_types()
      let data = Object.values(res.data)
      let obj = []

      for (var i = 0; i < data.length; i++) {
        obj.push({
          text: data[i]
        })
      }
      this.complain_list = obj
    },
    // 用户选择举报理由
    complain_click(index) {
      // console.log(`点击了第${index + 1}项,内容为${this.complain_list[index].text}`)

      this.$u.api.user_complain({
        type: this.complain_type,
        id: this.complain_id,
        report_id: index + 1
      })
    },
    // 举报评论
    complain_comment(id, type) {
      // type=0 举报直接评论 =1 举报评论里的回复
      this.complain_show = true
      this.complain_id = id
      this.complain_type = type
      this.$refs.uToast.show({
        title: ' 你要举报吗？ ',
        type: 'success'
      })
    },
    // 点赞
    like_to_comment(id, type, count) {
      let self = this

      this.$u.api
        .setlike({
          type: type,
          id: id
        })
        .then((res) => {
          if (res.code === 200) {
            self.comment_list
            for (var i = 0; i < self.comment_list.length; i++) {
              if (self.comment_list[i].id == id) {
                self.comment_list[i].like++
                self.comment_list[i].is_like = true
                break
              }
            }
            self.get_comment_list()
          }
        })
      this.$refs.uToast.show({
        title: count ? '已经点赞过啦' : '点赞成功',
        type: 'success'
      })
    },
    // 键盘失去焦点事件
    focu_blur() {
      this.set_focus = false
      setTimeout(() => {
        this.$set(this.flag, 'type', 0)
        this.$set(this.flag, 'id', '')
        this.user_comment = ''
      }, 300)
    },

    //  唤起键盘,非话题回复(回复话题 直接唤起键盘 不调用次函数)
    //  type:0 评论话题 1 回复：一级评论 2回复：折叠评论
    //  id1 一级id; id2 折叠id;
    //  by_nickname 被回复人昵称
    //  type 类型：0 回复话题(志愿者评论 或者 自己置顶评论)
    //  to_other 是否是回复其他人的标志
    click_talkto_other(type, id1, id2, to_other, place_holder, item) {
			console.log('item', item, 'vuex_user_info', this.vuex_user_info.uid)
			if(item.member_id == this.vuex_user_info.uid) {
				uni.showToast({
          title: '暂时无法回复自己',
          icon: 'none'
        })
				return
			}
      this.ph_val = '回复 ' + place_holder
      this.flag.type = type //类型
      this.flag.id = id1 //回复id
      this.flag.sub_id = id2 //折叠评论id
      this.flag.to_other = to_other //回复其他人的标记
      if (this.human_info.status != 2) {
        let hints = ''
        this.human_info.status == 0 ? (hints = '审核中,不能评论') : (hints = '人已找回，评论区已关闭')
        uni.showToast({
          title: hints,
          icon: 'none'
        })
        return
      }
      this.set_focus = true //弹出键盘
    },
    // 刷新评论列表
    refresh_comment_list() {
      let self = this
      this.pageX = 0
      this.pageX = this.pageX + 1
      this.$u.api
        .get_comments_list({
          id: this.topic_id,
          page: this.pageX,
          psize: this.page_size //每次获取5条
        })
        .then((res) => {
          if (res.code == 200) {
            self.comment_list = res.data.data
          } else {
            self.pageX = self.pageX - 1
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    // 获取评论列表
    get_comment_list() {
      if (this.pageX >= this.max_page && this.total_cnt != 0) {
        return
      }
      let self = this
      this.pageX = this.pageX + 1
      this.$u.api
        .get_comments_list({
          id: this.topic_id,
          page: this.pageX,
          psize: this.page_size //每次获取5条
        })
        .then((res) => {
          if (res.code == 200) {
            self.comment_list = [...self.comment_list, ...res.data.data]
            self.total_cnt = res.data.total_count
            self.max_page = res.data.page_count
          } else {
            self.pageX = self.pageX - 1
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
          }
        })
    },
    // 重置回复标记
    __reset_talk_flag() {
      this.$set(this.flag, 'type', 0)
      this.$set(this.flag, 'id', this.topic_id)
      this.$set(this.flag, 'sub_id', '')
      this.$set(this.flag, 'by_nickname', '')
      this.$set(this.flag, 'to_other', false)
      this.ph_val = ''
    },
    // 键盘确定
    keyboard_confirm() {
      let self = this;
			console.log('this.flag.to_other', this.flag.to_other)
			console.log('self.vuex_user_info.uid', self.vuex_user_info.uid)
			console.log('self.human_info.member_id', self.human_info.member_id)
      if (self.vuex_user_info.uid == self.human_info.member_id && this.flag.to_other == false) {
        // 是发布人 且 不是回复其他人
        this.$u.api.send_top_comment({
					id: this.human_info.id,
					content: this.user_comment
				}).then((res) => {
            if (res.code == 200) {
              self.get_top_comment(this.topic_id)
              self.__reset_talk_flag()
            }
          })
      } else {
        let args = {}
				console.log('this.topic_id', this.topic_id)
        switch (this.flag.type) {
          case 0:
            // 评论话题
            args = {
              type: 0,
              id: this.topic_id,
              content: this.user_comment,
              clew: 0
            }
            break
          case 1:
            // 回复一级评论
            args = {
              type: 1,
              id: this.flag.id,
              content: this.user_comment,
              clew: 0
            }
            break
          case 2:
            // 回复二级评论
            args = {
              type: 2,
              id: this.flag.sub_id,
              content: this.user_comment,
              clew: 0
            }
            break
        }

        this.$u.api.user_add_comments(args).then((res) => {
          if ((res.code = 200)) {
            self.$refs.uToast.show({
              title: ' 发表成功 ',
              type: 'success'
            })
            // 刷新评论列表
            self.refresh_comment_list()
            uni.hideKeyboard()
            self.__reset_talk_flag()
          } else {
            self.$refs.uToast.show({
              title: '网络较差,请稍后重试',
              type: 'error'
            })
            self.__reset_talk_flag()
          }
        })
      }
    },
    // 查看全局地图
    see_global_map() {
      if (this.map_open_flag == 0) {
        this.map_height = 80
        this.map_btn_txt = '关闭地图'
        this.map_open_flag = 1
      } else {
        this.map_height = 30
        this.map_btn_txt = '查看地图'
        this.map_open_flag = 0
      }
    },
    // 预览图片
    preview_img(index, img) {
      if (this.human_info.status == 3) {
        uni.showToast({
          title: '人已找回 , 感谢你的关注',
          icon: 'none'
        })
        return
      }
      // ------------------------------
      let url_arr = []
      for (var i = 0; i < img.length; i++) {
				if(img[i].indexOf('https') !== -1) {
					url_arr.push(img[i])
				} else {
					url_arr.push(this.vuex_api_HEADER + img[i])
				}
        
      }
      let obj = {
        current: index,
        urls: url_arr,
        indicator: 'number',
        loop: true
      }
      uni.previewImage(obj)
    },
		// 点击编辑，进入发布寻人编辑
		handleToEdit() {
			uni.redirectTo({
			    url: `../make/make?id=${this.human_info.id}`
			});
		}
  }
}
</script>

<style lang="scss" scoped>
#container {
  background-color: #e7fafd;
	height: 100vh;

  .banner {
    position: absolute;
    top: -16rpx;

    .img {
      width: 750rpx;
      height: 300rpx;
    }
  }

  .map {
    // width: 725rpx;
    // height: 360rpx;
    // margin-top: 16rpx;
    border-radius: 15rpx;
    overflow: hidden;
    position: relative;
    // top: -280rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .content {
    width: 725rpx;
    background-color: #fff;
    padding: 13rpx 19rpx 15rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    position: relative;
    margin-top: 11rpx;
    // top: -260rpx;

    .title {
      color: #ff0000;
      font-size: 30rpx;
    }

    .use-time {
      display: flex;
      font-size: 10px;
      color: #fff;
      margin: 15rpx 0 24rpx 0;

      .find-state {
        background-color: #fc6e20;
        padding: 0 12rpx;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
      }

      .find-time {
        background-color: #4988fd;
        padding: 0 11rpx;
        border-top-right-radius: 10rpx;
        border-bottom-right-radius: 10rpx;
      }
    }

    .info {
      // border-color: red;
      // border: 2px solid red;
      // border-radius: 10rpx;

      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      padding: 10rpx 20rpx 8rpx 0rpx;
      .info_image_box {
        border-radius: 10rpx;
        width: 32%;
        height: 199rpx;
        margin: 0 4rpx 6rpx;
      }
      .photo {
        border-radius: 10rpx;
        width: 100%;
        height: 100%;
      }
    }
		.statusThree {
			display: flex;
			justify-content: start;
			.info_image_box {
			  border-radius: 10rpx;
			  width: 32%;
			  height: 199rpx;
			  margin: 0 4rpx 6rpx;
			}
			.photo {
			  border-radius: 10rpx;
			  width: 100%;
			  height: 100%;
			}
		}
  }

  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48rpx;
    color: #fff;
    width: 662rpx;
    height: 96rpx;
    background-color: #61dcff;
    border-radius: 48rpx;
    position: relative;
    // top: -253rpx;
    margin: 0 auto;
    margin-top: 30rpx;
    margin-bottom: 27rpx;

    .icon {
      width: 70rpx;
      height: 70rpx;
      margin-right: 11rpx;
    }
  }

  .content-detail {
    width: 725rpx;
    background-color: #fff;
    padding: 0 0 28rpx 20rpx;
    border-radius: 20rpx;
    margin: 0 auto;
    position: relative;
    // top: -253rpx;

    .waimao {
      display: flex;

      .tips {
        flex: 0 0 140rpx;
      }
    }

    .detail-item {
      display: flex;
      align-items: center;
      padding-top: 30rpx;

      .icon {
        width: 26rpx;
        height: 26rpx;
        margin-right: 17rpx;
      }

      .type {
        font-weight: 700;

        .txt {
          color: #ff7652;
          font-weight: normal;
        }
      }

      .distance {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        .txt {
          color: #ff7652;
          font-weight: normal;
        }

        .dingwei {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: auto;
          padding: 5rpx 16rpx;
          font-weight: normal;
          font-size: 18rpx;
          color: #7a7677;
          background-color: #f4f4f4;
          border-radius: 5rpx;
          margin-top: 19rpx;

          .icon {
            width: 25rpx;
            height: 25rpx;
          }
        }
      }
    }
  }

  .it-box {
    width: 100%;
		// height: 50vh;
    background-color: #e7fafd;
    margin: 0 auto;
    position: relative;
    padding-bottom: 100rpx;
    padding-left: 15rpx;
    // top: -243rpx;

    .icon {
      width: 32rpx;
      height: 32rpx;
      margin-right: 8rpx;
    }

    .title {
      display: flex;
      align-items: center;
      font-weight: 700;
    }

    .owner-box,
    .user-comment {
      // margin: 0rpx 0rpx 0rpx 20rpx;
      padding-top: 35rpx;

      .promulgator-content {
        display: flex;
        padding: 5rpx 5rpx 25rpx 20rpx;
        border-bottom: 1rpx solid #eee;
        width: 100%;

        .promulgator-content-info {
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: flex-start;
          .right-up-box {
            display: flex;
            width: 75vw;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;

            .nick-box {
              display: flex;
              flex-direction: row;
              justify-content: ceter;
              align-items: center;

              .auth {
                background-color: #1cb5a1;
                color: #ffffff;
                border-radius: 5rpx;
                padding-left: 10rpx;
                margin-left: 10rpx;
                width: 100rpx;
                height: 25rpx;
                font-size: 18rpx;
                line-height: 25rpx;

                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
              }
            }

            .time-box {
              font-size: 18rpx;
              padding-top: 5rpx;
              margin-top: 5rpx;
              display: flex;
              flex-direction: row;
              justify-content: flex-start;
              align-items: center;

              .dis-box {
                display: flex;
                flex-direction: row;
                justify-content: ceter;
                align-items: center;

                .icon {
                  width: 16rpx;
                  height: 16rpx;
                  margin-left: 10rpx;
                  padding-top: 5rpx;
                }

                .distance {
                  margin-left: 5rpx;
                  font-size: 18rpx;
                  padding-top: 5rpx;
                }
              }
            }
          }

          .level1 {
            display: flex;
            width: 75vw;
          }

          .level2 {
            display: flex;
            flex-direction: column;
            width: 75vw;
            background-color: #dbdbdb;
            padding: 14rpx 8rpx;
            border-radius: 10rpx;
          }

          .img {
            width: 64rpx;
            height: 64rpx;
            margin-right: 10rpx;
            margin-top: 10rpx;
            border: 1px solid #f8f8f8;
            border-radius: 50%;
          }

          .promulgator-content-txt {
            width: 447rpx;

            .time {
              margin: 5rpx 0;
              font-size: 18rpx;
              color: #575757;
            }

            .clue {
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 18rpx;
              width: 300rpx;
              height: 30rpx;
              border-radius: 5rpx;
              background-color: #ff0000;
              color: #fff;
              margin-right: 10rpx;
            }
          }
        }

        .like {
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          height: 21rpx;
          line-height: 21rpx;

          .icon {
            width: 21rpx;
            height: 21rpx;
            margin-left: 4rpx;
          }
        }
      }
    }
  }

  .bottom-box {
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background-color: #ffffff;
    padding: 13rpx 0 13rpx 13rpx;
    .share_img {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      // top: 0;
      right: 20rpx;
    }

    .always-show {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .head {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 28rpx;
      }

      .input-box {
        background-color: #f4f4f4;
        width: 400rpx;
        height: 68rpx;
        border-radius: 10rpx;
        padding-left: 20rpx;
      }
    }

    .sometimes-show {
      width: 100%;
      height: 50rpx;
      // background-color: #0BB20C;
      // border: 1px solid #000000;
      margin-left: 108rpx;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
    }
  }

  .community {
    width: 100%;
    height: auto;
    background-color: #fff;
    margin: 0 auto;
    // position: relative;
    // top: -30px;
    box-shadow: 4px 4px 10px #b3b3b3;
    border-radius: 20rpx;
    // overflow: hidden;
    // position: relative;

    .img {
      width: 100%;
    }

    .info {
      display: flex;
      padding: 12px 51px 16px 21px;
      position: absolute;
      bottom: 0;
      background-color: #fff;
      width: 100%;

      .icon {
        flex: 0 0 43px;
        width: 43px;
        height: 43px;
        border: 3px solid rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        margin-right: 8px;
        transform: translateY(-65%);
      }

      .ziliao {
        // width: 450rpx;
        .title {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 15px;

          .name {
            width: auto;
            font-size: 12px;
            color: #ff3333;
            margin-right: 15rpx;
          }

          .gender-pic {
            width: 28rpx;
            height: 28rpx;
          }

          .renzheng {
            text-align: center;
            font-size: 9px;
            background: #3f495d;
            border-radius: 8px;
            color: #c7ba8d;
            margin-left: 10px;
            padding: 3px 20rpx;
          }
        }

        .msg {
          font-size: 9px;
          margin-bottom: 17px;
        }

        .content {
          font-size: 9px;
          color: #7c7c7c;
        }
      }
    }
  }
	//编辑按钮
	.edit-bottom {
		width: 50%;
		height: 80rpx;
		margin: 20rpx auto;
		background: url('../../static/detail-img/edit-bg.png') no-repeat;
		background-size: 100% 80rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 4rpx;
	}
	.laiyuan {
		font-size: 20rpx;
		color: #999999;
	}
}
.side-bar {
	position: fixed;
	z-index: 50;
	right: 10rpx;
	bottom: 45vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 15rpx;
	padding: 20rpx 0 20rpx 0;
	box-shadow: -3rpx 3rpx 2rpx #f5f5f5;
	width: 60rpx;
}
</style>
